<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="dj">
        <div v-if="a===10">lsjdkasjdks</div>
        <button @click="a++">+</button>
        <div v-if="c%2===0">fjgjgj</div>
        <button @click="c++">切换</button>
    </div>
    <div id="bjq">
        <div>{{b}}</div>
        <button @click="b++" v-if="b<10">+</button>
        <button v-if="b===10" style="color: gray;" disabled>+</button>
        <button @click="b--" v-if="b>1">-</button>
        <button v-if="b===1" style="color: gray;" disabled>-</button>
    </div>
   

    <script src="./vue.js"></script>
    <script>
        const { createApp, ref } = Vue;
        createApp({
            setup() {
                let a = ref(0)
                let c = ref(0)
                return {
                    a,
                    c
                }
            }
        }).mount('#dj')

        createApp({
            setup() {
                let b = ref(0)
                return {
                    b
                }
            }
        }).mount('#bjq')
    </script>

</body>

</html>